<template>
    <!-- 设置为模板 -->
    <div class="main set_template">
        <div class="title">
            保存为“我的模板”
            <i @click="closeFn"></i>
        </div>
        <div class="form">
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="111px" class="demo-ruleForm">
                <el-form-item label="模板名称" prop="name">
                    <el-input type="input" v-model="ruleForm.name" placeholder="请输入模板名称" ></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="modal-btns">
                        <div class="save-btn" @click="submitForm('ruleForm')">保存</div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name:'projectEnd',
    props:{
        data:{
            type: Object,
			required: {}
        }
    },
    data() {
        return {
            ruleForm: {},
            rules:{
                name: [
                    { required: true, message: '请输入模板名称', trigger: 'blur' }
                ],
            }
        }
    },
    created() {
        this.ruleForm.projectId = this.data.id;
        this.ruleForm.userId = this.$store.state.userInfo.userId;
    },
    methods: {
        //关闭
        closeFn() {
            this.$emit("close",'is_show_setTemplate');
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                this.ruleForm.flag=1;
                    this.$http.post("/plan/plan/temp/save",this.ruleForm).then(res =>{
                        if(res.statusCode == 200){
                            this.$emit("callback",true);
                        }else{
                            this.$message({
                                message: res.statusMsg || '请求失败',
                                type: 'error'
                            });
                        }
                    }).catch(err =>{
                        console.log(err)
                    })
                } else {
                    return false;
                }
            });
        },
    }
}
</script>

<style scoped type="text/scss" lang="scss">
.main {
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 6px;
    width: 575px;
    height: 196px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 32px 32px 0 32px;
    overflow: hidden;
    > .title {
        line-height: 1.1;
        font-size: 16px;
        color: #454a55;
        position: relative;
        height: 48px;
        font-weight: 600;
        > i {
            background-size: 16px 17px;
            background-position: center;
            background-repeat: no-repeat;
            position: absolute;
            width: 16px;
            height: 17px;
            background-image: url("~@/assets/img/close_icon.png");
            top: 0px;
            right: 0px;
            cursor: pointer;
        }
    }

    .form {
        .el-form-item__label {
            padding-right: 16px;
        }
        .modal-btns{
            display: flex;
            flex-direction:row-reverse;
        }
        .cancel-btn, .save-btn {
            display: inline-block;
            border-radius: 6px;
            width: 88px;
            line-height: 32px;
            text-align: center;
            cursor: pointer;
        }
        .save-btn {
            background-color: #0755db;
            color: #FFFFFF;
        }
        .cancel-btn {
            color: #b3c0c9;
        }
        .add-manager {
            position: absolute;
            width: 38px;
            height: 38px;
            background-image: url("~@/assets/img/project/add_manager_icon1.png");
            background-size: 38px 38px;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
        }
        .add-manager:hover{
            background-image: url("~@/assets/img/project/add_manager_icon2.png");
        }
    }
    .ic_accomplish{
        width: 14px;
        height: 14px;
        background-image: url("~@/assets/img/project/info/ic_accomplish.png");
    }
}
</style>
<style lang="scss" type="text/scss">
.set_template{
    .form {
        .el-form-item__label {
            padding-right: 16px;
        }
        .el-input__inner, .el-textarea__inner {
            width: 400px;
            background-color: #f2f6f9;
        }
        .el-date-editor--date, .el-date-editor--time {
            .el-input__inner {
                width: 176px;
            }
        }
        .el-input__inner:focus, .el-textarea__inner:focus {
            background-color: #FFFFFF;
        }
        .line-time {
            width: 20px;
        }
    }
}
</style>
